<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="./bootstrap-5.1.3-dist/css/bootstrap.css" rel="stylesheet">
    <link href="./css/mycss.css" rel="stylesheet">
    <link href="./css/register.css" rel="stylesheet">
    <link href="./css/framework/font-awesome/css/font-awesome.css" rel="stylesheet">
    <!-- JS部分 -->
    <script src="./bootstrap-5.1.3-dist/js/jquery-3.6.0.min.js">
    </script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js">
    </script>
    <script rel="stylesheet" href="./bootstrap-5.1.3-dist/js/bootstrap.js"></script>
    <script src="./js/myjs.js">
    </script>
    <title>resgin</title>
</head>

<body>
    <div class="nav_n bg-nwhite ">
        <div class="line line_red"></div>
        <div class="col-lg-11 offset-lg-1">
            <nav class="navbar navbar-expand-md">
                <!-- Navbar links -->
                <div class="collapse navbar-collapse" id="collapsibleNavbar">
                    <ul class="navbar-nav ">
                        <li class="nav-item base">
                            <a class="nav-link" href="#">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Hot Deals</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Categories</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Laptops</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Smartphones</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Cameras</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Accessories</a>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
    </div>
    <div class="line line_grey"></div>
    <div class="container-fluid mynav bg-sgrey">
        <div class="container-lg">
            <div class="row inmynav">
                <div class="col-1 offset-1 bc-title text_weight_6">CHECKOUT</div>
                <div class="col-2 r_text1">
                    <div>HOME</div>
                    <div>CHECKOUT</div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid row myres">
        <div class="col-6 offset-1 mt-5 myleft">
            <form name="biaodan">
                <div class="r_mytext text_bigb text_weight_6">BILLING ADDRESS</div>
                <input name="zipcode" type="text" class="myin mt-3" placeholder="First Name">
                <input type="text" class="myin mt-3" placeholder="Last Name">
                <input type="text" class="myin mt-3" placeholder="Email">
                <input type="text" class="myin mt-3" placeholder="Address">
                <input type="text" class="myin mt-3" placeholder="City">
                <input type="text" class="myin mt-3" placeholder="Country">
                <input type="text" class="myin mt-3" placeholder="ZIP Code">
                <input type="text" class="myin mt-3" placeholder="Telephone">
                <div class="create mt-3">
                    <input type="checkbox" class="entity" id="abc">
                    <label class="mycheckbox" for="abc">Create Account?
                        <div class="xiangyin">
                            <span class="mt-1">Lorem ipsum dolor sit amet,consecteut adipsing slit,sed do eiusmod remod
                                tempor incididunt.</span>
                            <input type="text" class="myin mt-1">
                        </div>
                    </label>
                </div>
            </form>
            <div class="r_mytext text_bigb text_weight_6 mt-3">SHIPING ADDRESS</div>
            <div class="create mt-3">
                <input type="checkbox" class="entity" id="cba">
                <label class="mycheckbox" for="cba">Ship to a diffrent address?
                    <div class="inf">
                        <form action="">
                            <input name="zipcode" type="text" class="myin mt-3" placeholder="First Name">
                            <input type="text" class="myin mt-3" placeholder="Last Name">
                            <input type="text" class="myin mt-3" placeholder="Email">
                            <input type="text" class="myin mt-3" placeholder="Address">
                            <input type="text" class="myin mt-3" placeholder="City">
                            <input type="text" class="myin mt-3" placeholder="Country">
                            <input type="text" class="myin mt-3" placeholder="ZIP Code">
                            <input type="text" class="myin mt-3" placeholder="Telephone">
                        </form>
                    </div>
                </label>
            </div>
            <textarea name="" id="" class="myTarea mt-4" placeholder="Order Nodes"></textarea>
        </div>
        <div class="col-4 myright">
            <div class="sub mt-5">
                <div class="mt-4 text_bigb text_weight_6 text_center">YOUR ORDER</div>
                <div class="row mt-4 text_small">
                    <div class="col-3 ms-4 text_weight_6">PRODUCT</div>
                    <div class="col-3 offset-5 text_weight_6 text-r "> TOTAL
                    </div>
                </div>
                <div class="row mt-3 text_small text_grey_3">
                    <div class="col-5 ms-4">1× Product Name Coes Here</div>
                    <div class="col-3 offset-3 text-r">$980.00 </div>
                </div>
                <div class="row mt-3 text_small text_grey_3">
                    <div class="col-5 ms-4">1× Product Name Coes Here</div>
                    <div class="col-3 offset-3 text-r">$980.00</span></div>
                </div>
                <div class=" row mt-3 text_small">
                    <div class="col-3 ms-4 text_weight_6">Shiping</div>
                    <div class="col-3 offset-5 text_weight_6 text-r">FREE
                    </div>
                </div>
                <div class="row mt-3 text_small">
                    <div class="col-3 ms-4 text_weight_6 mt-2">TOTAL</div>
                    <div class="col-4 offset-4 text-r"> <span class="mytext_rb text_weight_6">$2940.00</span> </div>
                </div>
                <div class="only mt-4">
                    <input id="ckk" type="radio" name="sex" class="rad">
                    <label for="ckk" class="onlycheck">
                        Direct Bank Transfer
                        <div class="onlyshow">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                            tempor incididunt ut labore et dolore magna aliqua.</div>
                    </label>
                </div>
                <div class="only mt-2">
                    <input id="ckk2" type="radio" name="sex" class="rad">
                    <label for="ckk2" class="onlycheck">
                        Direct Bank Transfer
                        <div class="onlyshow">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                            tempor incididunt ut labore et dolore magna aliqua.</div>
                    </label>
                </div>
                <div class="only mt-2">
                    <input id="ckk3" type="radio" name="sex" class="rad">
                    <label for="ckk3" class="onlycheck">
                        Paypal System
                        <div class="onlyshow">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                            tempor incididunt ut labore et dolore magna aliqua.</div>
                    </label>
                </div>
                <div class="create2 mt-5 ms-4">
                    <input type="checkbox" class="entity" id="abc1">
                    <label class="mycheckbox" for="abc1">I've read and accept the terms & conditions
                        <div class="xiangyin">
                            <input type="text" class="myin mt-1">
                        </div>
                    </label>
                </div>
                <input type="submit" class="mysub mt-4" value="PLACE ORDER">
            </div>
        </div>
    </div>
    <div class="line-solid"></div>
    <footer>
        <div class="f-title mt-4">Sign Up for the <span class="text_weight_6">NEWSLETTER</span> </div>
        <div class="row myinput mt-4">
            <input type="text" class="left col-8 " placeholder="Enter Your Email">
            <button class="right col-4"> <i class="fa fa-envelope"></i> <span class="text_weight_6">Subscribe</span>
            </button>
            <div class="icon mt-5">
                <div class="iconin pos1"><i class="fa fa-facebook"></i> </div>
                <div class="iconin pos"><i class="fa fa-twitter"></i> </div>
                <div class="iconin pos3"><i class="fa fa-instagram"></i></div>
                <div class="iconin pos4"><i class="fa fa-pinterest"></i></div>
            </div>
        </div>
    </footer>
    <div class="last row">
        <div class="col-3 offset-1">
            <ul>
                <h4>ABOUT US</h4>
                <li class="color_grey mt-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt ut.</li>
                <li class="color_grey mt-2"> <i class="fa fa-map-marker me-2"></i> 1734 Stonecoal Road</li>
                <li class="color_grey mt-2"> <i class="fa fa-phone me-2"></i> +021-95-51-84</li>
                <li class="color_grey mt-2"><i class="fa fa-envelope-o me-2"></i> email@email.com</li>
            </ul>
        </div>
        <div class="col-2">
            <ul>
                <h4>Categories</h4>
                <li class="color_grey mt-4">Hot deals</li>
                <li class="color_grey mt-2">Laptops</li>
                <li class="color_grey mt-2">Smartphones</li>
                <li class="color_grey mt-2">Cameras</li>
                <li class="color_grey mt-2">Accessories</li>
            </ul>
        </div>
        <div class="col-2">
            <ul>
                <h4>INFORMATION</h4>
                <li class="color_grey mt-4">About Us</li>
                <li class="color_grey mt-2">Contact Us</li>
                <li class="color_grey mt-2">Privacy Policy</li>
                <li class="color_grey mt-2">Orders and Returns</li>
                <li class="color_grey mt-2">Terms&Conditions</li>
            </ul>
        </div>
        <div class="col-2 ms-5">
            <ul>
                <h4>SERVICE</h4>
                <li class="color_grey mt-4">My Account</li>
                <li class="color_grey mt-2">View Cart</li>
                <li class="color_grey mt-2">Wishlist</li>
                <li class="color_grey mt-2">Track My Order</li>
                <li class="color_grey mt-2">Help</li>
            </ul>
        </div>
    </div>
</body>

</html>